import { FC, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Form, Input, Button, Checkbox, Space } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import styled from "styled-components";

import type { LoginDto } from "@/api/interface";
import type { AppDispatch } from "@/store";
import { login } from "@/store/user";
import { useDispatch } from "react-redux";

const FormWrapper = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .login_form {
    width: 400px;
    .login_forgot {
      float: right;
    }
    .captcha {
      right: 0;
      height: 100%;
      position: absolute;
      cursor: pointer;
    }
  }
`;
const Login: FC = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch<AppDispatch>();
  const signIn = async (value: LoginDto) => {
    const token = await dispatch(login(value));
    console.log(token, "token");

    if (token) {
      navigate("/home");
    }
  };
  const [code, setCode] = useState("/api/auth/captcha");
  return (
    <>
      <FormWrapper className="login">
        <Form
          className="login_form"
          initialValues={{ remember: true }}
          layout="vertical"
          onFinish={signIn}>
          <Form.Item
            name="username"
            rules={[
              { required: true, message: "用户名不能为空" },
              { min: 2, message: "用户名必须大于1位", warningOnly: true },
            ]}>
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              { required: true, message: "请输入密码" },
              { min: 3, message: "密码必须大于2位", warningOnly: true },
            ]}>
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item
            className="code"
            name="code"
            rules={[{ required: true, message: "请输入验证码" }]}>
            <Input
              suffix={
                <img
                  onClick={() => setCode("/api/auth/captcha?time=" + new Date().getTime())}
                  className="captcha"
                  src={code}
                  alt=""
                />
              }></Input>
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记得我</Checkbox>
            </Form.Item>
            <a className="login_forgot">忘记密码</a>
          </Form.Item>

          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
              <Button onClick={() => navigate("/user/register")} type="primary">
                注册
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </FormWrapper>
    </>
  );
};
export default Login;
